import { Table, Progress } from "antd";
import type { ColumnsType } from "antd/es/table";
import type { analysisType, analysisOptionType } from "@/types/index";
import { TableContent } from "../stye";

const columns: ColumnsType<analysisOptionType> = [
  {
    title: "选项",
    dataIndex: "content",
    align: "center",
    width: "33%"
  },
  {
    title: "样本量",
    dataIndex: "count",
    align: "center",
    width: "33%"
  },
  {
    title: "比例",
    dataIndex: "ratio",
    align: "center",
    width: "33%",
    render: (text: string) => <Progress percent={Number(text)} status="active" />
  }
];

export default function AnalysisTable({ tableData }: { tableData: analysisType }) {
  return (
    <TableContent>
      <Table dataSource={tableData.option} columns={columns} pagination={false} bordered rowKey="id"></Table>
      <div className="step-total">
        本题有效填写人次：<span>{tableData?.assessCount} </span> 人
      </div>
    </TableContent>
  );
}
